<div flex-gt-lg="50" flex-md="60" flex-lg="60" layout="column" layout-fill class="settings-child-view eb-admin-password">

    <div class="help-on-tabbed-view">
        <eb-help-icon template="app/components/system/adminPassword/help-admin-password.template.html">
        </eb-help-icon>
    </div>

    <div layout-padding layout-margin></div>

    <div layout="column" class="config-frame md-whiteframe-z1">

        <div layout="row">
            <md-switch md-theme="eBlockerThemeSwitch" class="md-primary switch-word-break" ng-model="vm.enabled" ng-change="vm.togglePasswordRequired()">
                {{ vm.enabled ? 'ADMINCONSOLE.ADMIN_PASSWORD.LABEL_PASSWORD_ENABLED' : 'ADMINCONSOLE.ADMIN_PASSWORD.LABEL_PASSWORD_DISABLED' | translate }}
            </md-switch>
        </div>

        <div ng-if="!vm.enabled">
            <span>{{'ADMINCONSOLE.ADMIN_PASSWORD.NO_PASSWORD_TEXT' | translate}}</span>
        </div>

        <div ng-if="vm.enabled">
            <md-button class="md-raised md-secondary"
                    ng-click="vm.changePassword()">
                {{'ADMINCONSOLE.ADMIN_PASSWORD.ACTION.CHANGE_PASSWORD' | translate}}
            </md-button>
        </div>

    </div>

</div>
